<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>样品瓶查询</el-breadcrumb-item>
    </el-breadcrumb>


    <!--      添加化合物按钮区域-->
    <el-card style="margin-top: 20px;">
      <el-col span="12">1</el-col>
      <el-row :gutter="20">
        <el-col :span="6">
          <!--          双向绑定queryInfo.query 用于搜索 -->
          <!--          clearable 可清空的文本框 @clear 清空的时候使用方法 使用getUserList 就会在清空后在进行一次查询 达到复原的目的-->
          <el-input v-model="queryInfo.query" clearable placeholder="请输入内容" @clear="getMdList">
            <!--            getUserList 发送搜索请求-->
            <el-button slot="append" icon="el-icon-search" @click="getMdList"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!--      角色列表区域-->
      <el-table :data="mdList" border stripe style="width:100%" class="mdTable">
        <!-- 展开列 -->

<!--        <el-table-column type="expand">-->
<!--          <template slot-scope="props">-->
<!--&lt;!&ndash;                        <div>{{ props.row }}</div>&ndash;&gt;-->
<!--            <el-form label-position="left" inline class="demo-table-expand">-->




<!--              <el-row class="expand-msg">-->
<!--                <el-col :span="12">-->
<!--                  <el-form-item label="评估模型" class="table-item">-->
<!--                    <el-button class="add-button" type="primary" @click="uploadPse(props.row.moduleUrl)" plain>下载</el-button>-->
<!--&lt;!&ndash;                    <span class="table-item-span">{{ props.row.moduleUrl }}</span>&ndash;&gt;-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--                <el-col :span="12" class="expand-msg-left">-->
<!--                  <el-form-item label="是否进入合成" class="table-item">-->
<!--                    <span class="table-item-span">{{ props.row.compound }}</span>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--              <el-row class="expand-msg">-->
<!--                <el-col :span="12">-->
<!--                  <el-form-item label="信息录入日期" class="table-item">-->
<!--                    <span class="table-item-span">{{ props.row.inputDate | timestampToTime }}</span>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--                <el-col :span="12" class="expand-msg-left">-->
<!--                  <el-form-item label="信息录入人员" class="table-item">-->
<!--                    <span class="table-item-span">{{ props.row.keyboarder }}</span>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </el-form>-->

<!--          </template>-->
<!--        </el-table-column>-->
        <!-- 索引列 -->
<!--        <el-table-column type="index" label="#"></el-table-column>-->
        <el-table-column label="化合物编号" prop="sid"></el-table-column>
        <el-table-column label="化合物结构smiles" prop="structureSmiles"></el-table-column>
        <el-table-column label="信息录入日期" prop="inputDate" :formatter="formatDate"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.sid)">编辑
            </el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeMdBySid(scope.row.sid)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页区域-->
      <el-pagination
        :current-page="queryInfo.page"
        :page-size="queryInfo.size"
        :page-sizes="[5,10,15,20]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
      <!--添加化合物的弹出框-->
      <!--    prop.sync表示这个子组件会修改父组件的值，v-model表示这是个表单类型的组件。-->
      <!--      ※ 放大缩小容易乱样式 先把width写死了-->
      <el-dialog :visible.sync="addFormVisible"
                 title="分子设计"
                 width="1200px" @close="addFormClosed">
        <!--            :rules先不写了-->
        <el-form :model="addForm" ref="addMdRef" label-width="140px" class="molecular-design">
          <el-row :gutter="0">
            <el-col :span="8">
              <el-form-item label="化合物结构">
                <el-upload
                  v-model="addForm.structureUrl"
                  class="upload-demo"
                  ref="cs"
                  :limit="1"
                  show-file-list
                  :action="url+`uploadPic`"
                  :on-preview="handlePreview"
                  :on-remove="handleCsRemove"
                  :on-success="csHandleSuccess"
                  :on-error="csHandleError"
                  :file-list="fileList"
                  :before-upload="beforePicUpload">
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="评估模型">
                <el-upload
                  v-model="addForm.moduleUrl"
                  class="upload-demo"
                  ref="am"
                  :limit="1"
                  show-file-list
                  :action="url+`uploadPse`"
                  :on-preview="handlePreview"
                  :on-remove="handleAmRemove"
                  :on-success="amHandleSuccess"
                  :on-error="amHandleError"
                  :file-list="fileList"
                  :before-upload="beforePseUpload">
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传pse文件</div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-row>
                <el-col :span="14">
                  <el-form-item label="化合物结构smiles">
                    <el-input v-model="addForm.structureSmiles"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="分子量">
                    <el-input v-model="addForm.mw"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

<!--              <el-row>-->
<!--                <el-col :span="12">-->
<!--                  <el-form-item label="虚拟化合物编号">-->
<!--                    <el-input v-model="addForm.vid"></el-input>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--                <el-col :span="12">-->
<!--                  <el-form-item label="化合物编号">-->
<!--                    <el-input v-model="addForm.sid"></el-input>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--              </el-row>-->
              <el-row>
                <el-col :span="12">
                  <el-col>
                    <el-form-item label="设计人">
                      <el-input v-model="addForm.designer"></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="研发项目">
                    <el-input v-model="addForm.project"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="信息录入日期">
                <el-col :span="6">
                  <el-date-picker v-model="addForm.inputDate" value-format="timestamp" type="date" placeholder="选择日期"
                                  style="width: 100%;"></el-date-picker>
                </el-col>
              </el-form-item>
              <br> <br><br> <br>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="理论值 clog P">
                <el-input v-model="addForm.clogP"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="理论值 tPSA">
                <el-input v-model="addForm.tpsa"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="理论值 HBD">
                <el-input v-model="addForm.hbd"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <!--          这个是上传文件-->
            <el-col :span="12">
              <el-form-item label="是否进入合成">
                <el-switch v-model="addForm.compound"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="信息录入人员">
                <el-input v-model="addForm.keyboarder"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <!--      底部区域-->
        <span slot="footer" class="dialog-footer">
               <el-button @click="addFormVisible = false">取 消</el-button>
               <el-button type="primary" @click="addMd">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>


  </div>
</template>

<script>
import axios from "axios";

export default {
  //分子设计
  name: "SearchBarCode",
  data() {
    return {
      // 所有角色列表
      mdList: [],
      // 以下是弹出框
      //是否显示弹出框
      addFormVisible: false,
      //要提交的表单信息
      addForm: {

        structureUrl: '',
        structureSmiles: '',
        vid: '',
        sid: '',
        mw: '',
        clogP: '',
        tpsa: '',
        hbd: '',
        designer: '',
        project: '',
        moduleUrl: '',
        compound: '',
        inputDate: '',
        keyboarder: '',
        type: 1,
        // roleName: '',
        // roleDesc: ''
      },
      //有个name 有个url
      fileList: [
        // {
        //   name: 'food.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }
      ],
      queryInfo: {
        query: '',
        // 当前的页数
        page: 1,
        // 当前每页显示多少条数据
        size: 5,
        type: 1,
      },
      total: 0,
      // 监听 分页的size 改变的事件
      url: this.now_url.now_url
    }
  },
  created() {
    this.getMdList()
  },
  mounted() {
    let times = (new Date()).getTime();
    // console.log(times)
    this.addForm.inputDate = times
  },
  methods: {
    async getMdList() {
      const {data: res} = await this.$axios.get('get', {params: this.queryInfo})
      console.log(res)
      if (res.code !== 200) {
        return this.$message.error('获取信息列表失败！')
      }
      this.mdList = res.data
      this.total = res.total
    },
    handleSizeChange(newSize) {
      this.queryInfo.size = newSize
      this.getMdList()
      console.log(`每页 ${newSize} 条`)
    },
    // 监听 分页的page 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getMdList()
      console.log(`当前页: ${newPage}`)
    },
    onSubmit() {
      console.log('submit!');
    },
    //关闭表单的时候 重设内部属性为空
    addFormClosed() {
      this.$refs.addMdRef.resetFields()
    },
    //提交表单 发送请求
    addMd() {
      //可以设置如果添加了两个文件才允许提交 不过先写成可以直接提交的样子
      this.$refs.addMdRef.validate(async valid => {
        this.addForm.type=1
        // valid为False 请求失败
        // async 和 await 是等待执行操作，数据库操作是异步的
        console.log(this.addForm)
        if (!valid) return
        // valid为True 此时可以发起添加用户的网络请求
        //第一个参数是路径 第二个参数提交的data

        const {data: res} = await this.$axios.put('save', this.addForm)
        console.log("ok")
        console.log(res)
        if (res.code !== 200) {
          this.$message.error('表单提交失败！')
        }
        this.$message.success('表单提交成功！')
        // 隐藏添加用户的对话框
        this.addFormVisible = false
        // 重新获取用户的列表
        await this.getMdList()
      })
    },
    beforePicUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      // const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      return isJPG || isPNG;
    },
    beforePseUpload(file) {
      // console.log(file)
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf('.'));
      const isPse = fileType === '.pse';
      console.log(fileName)
      console.log(fileType)
      console.log(isPse)
      if (!isPse) {
        this.$message.error('上传头像图片只能是 Pse 格式!');
      }
      return isPse;
    },
    csSubmitUpload() {
      this.$refs.cs.submit();
    },
    amSubmitUpload() {
      this.$refs.am.submit();
    },
    handleCsRemove(file, fileList) {
      //删除之后 清空url

      this.addForm.structureUrl = ''
      // this.$message("文件已删除")
    },
    handleAmRemove(file, fileList) {
      //删除之后 清空url
      this.addForm.moduleUrl = ''
      // this.$message("文件已删除")
    },
    handlePreview(file) {
      console.log(file);
    },
    csHandleSuccess(res, file) {
      // console.log(res)
      // console.log(file)
      this.addForm.structureUrl = res.msg
      this.$message.success('化合物结构提交成功！')
    },
    csHandleError() {
      this.$message.error('化合物结构提交失败！')
    },
    amHandleSuccess(res, file) {
      this.addForm.moduleUrl = res.msg
      this.$message.success('评估模型提交成功！')
    },
    amHandleError() {
      this.$message.error('评估模型提交失败！')
    },
    //时间戳转化为时间
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property]
      if (data == null) {
        return null
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
    },
    uploadPse(fileName){
      console.log(fileName)
      if(!fileName){
        this.$message.error('文件不存在!');
        return
      }
      // const urlFirst = fileName.substring(0, name.lastIndexOf("."))
      const url =this.now_url.now_url+"server_static/"+fileName
      //下载

      window.open(url);
    },
    async removeMdBySid (sid) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        // 如果取消 会抛出一个错误error 这里用catch捕获他 然后返回error
        // 可以简写成.catch(err => err)
      }).catch(error => {
        return error
      })
      // 如果用户确认删除，返回值为字符串 confirm
      // 如果用户取消删除，返回值为字符串 cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('以取消删除')
      }
      // console.log('已删除用户')
      const { data: res } = await this.$axios.delete('/delete?sid=' + sid)
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error('删除用户失败！')
      }
      this.$message.success('删除用户成功!')
      await this.getMdList()
    }
  }
}
</script>
<!--删除了style的scope 减少权重-->
<style>
.mdTable {
  margin-top: 20px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  /*width: 90px;*/
  color: #99a9bf;
}

.demo-table-expand {
  margin-right: 0;
  margin-bottom: 0;
}

.expand-msg {
  border-radius: 1px !important;
  border: 1px solid rgba(239, 239, 239, 0.36);
  /*height: 50px;*/
  line-height: 50px;
  /*border: 1px solid #000 !important;*/
  /*border-right: none;*/
}

.expand-msg-left {
  border-left: 2px solid rgba(239, 239, 239, 0.36);
}

.table-item {
  margin-bottom: 0px !important;
  line-height: 50px;
  padding-left: 10px;
}

.table-item-span {
  line-height: 50px;

}
.add-button{
  margin-top: 5px;
}

.image-slot{
  /*width: 150px;*/
}
.table-image{
  width: auto;
  height: auto;
  /*max-width: 50%;*/
  /*max-height: 50%;*/
  display: block;
}


/*.el-form-item .table-item label{*/
/*  line-height: 50px;*/
/*  border-left: 2px solid #d7dae2;*/
/*  padding-left: 10px;*/
/*}*/
/*.el-form-item .demo-table-expand{*/
/*  margin-bottom: 0px !important;*/
/*}*/

/*.el-form-item__content{*/
/*  line-height: 50px;*/
/*  border-left: 2px solid #d7dae2;*/
/*  padding-left: 10px;*/
/*}*/
/*.el-form-item__label{*/
/*  padding-left: 10px;*/
/*}*/


</style>
